<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>欢迎来到：{{name}}</h1>
        <!-- 阻止默认事件 -->
        <a href="http://www.baidu.com" @click.prevent="showInfo">阻止默认事件</a><br>

        <div> <!-- 阻止默认事件+阻止冒泡 -->
            <a href="http://www.baidu.com" @click.stop.prevent="showInfo">阻止默认事件</a><br>
        </div>
        <!-- ctrl+y触发事件 -->
        <div class="demo1">
            ctrl+y触发事件：<input @keydown.ctrl.y="showInfo"></input>
        </div>

        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">阻止事件冒泡</button>
        </div>
        <button @click.once="showInfo">事件只触发一次</button>
        <!-- 事件修饰符（.passive） -->
        <!-- Keyup与Keydown区别为：触发不同、焦点不同、用途不同。
        
        一、触发不同
            1、Keyup：Keyup的事件在键盘按键按下时立即触发。

            2、Keydown：Keydown的事件在键盘按键放开时立即触发。

            二、焦点不同

            1、Keyup：Keyup事件触发的时候需要保证控件拥有焦点。

            2、Keydown：Keydown事件触发的时候不需要保证控件拥有焦点。
            三、用途不同

            1、Keyup：Keyup用于操作前验证检测操作条件是否符合。

            2、Keydown：Keydown用于操作完成后的界面修改更新
        -->
        <!-- tab必须配合keydown使用 -->
        <!-- 系统修饰键包括4个
            .ctrl
            .alt
            .shift
            .meta
            系统修饰键在使用时应注意：

            只有当系统修饰键和其他键组合使用，并且组合键释放时，才会触发keyup事件。

            只要按下系统修饰键，就会触发keydown事件
            -->
        <input type="text" @keydown.enter="showInfo">
        <input type="text" @keydown="showInfo1">
    </div>
   <script type="text/javascript">
    // ViewModel
    const vm = new Vue({
         el:'#root',
        data: {
            name:'中泰',
            address:"中泰"
        },
        methods:{
            showInfo() {
                alert('showInfo')
            },
            showInfo1(e) {
                console.log(e.key,e.keyCode);
            },
            showInfo2(a,b) {
                console.log(a,b);
            }
        }
    })
    console.log(vm);
   </script>
</body>
</html>